<div class="dialog-content-wrapper">
    <mat-toolbar class="mat-accent m-0" matDialogTitle>
        <mat-toolbar-row fxFlex fxLayout="row" fxLayoutAlign="space-between center">
            <span class="title dialog-title">{{dialogTitle}}</span>
            <button (click)="matDialogRef.close()" aria-label="Close dialog" mat-icon-button>
                <mat-icon>close</mat-icon>
            </button>
        </mat-toolbar-row>
    </mat-toolbar>

    <div basePerfectScrollbar class="p-16 pb-0 m-0" mat-dialog-content>

        <form [formGroup]="roleForm" class="event-form w-100-p" fxFlex fxLayout="column">
            <mat-form-field appearance="outline" class="w-100-p">
                <mat-label>角色名称</mat-label>
                <input formControlName="role_name"
                       matInput
                       name="角色名称"
                       required>
            </mat-form-field>

            <mat-form-field appearance="outline" class="w-100-p">
                <mat-label>角色描述</mat-label>
                <input formControlName="description"
                       matInput
                       name="角色描述"
                       required>
            </mat-form-field>
            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
                <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding matTreeNodeToggle>
                    <button disabled mat-icon-button></button>
                    <mat-checkbox (change)="todoLeafItemSelectionToggle(node)"
                                  [checked]="checklistSelection.isSelected(node.id)"
                                  class="checklist-leaf-node">{{node.name}}<h6 style="display: inline">{{node.id}}</h6>
                    </mat-checkbox>
                </mat-tree-node>


                <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
                    <button [attr.aria-label]="'toggle ' + node.filename" mat-icon-button
                            matTreeNodeToggle>
                        <mat-icon class="mat-icon-rtl-mirror">
                            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                        </mat-icon>
                    </button>
                    <mat-checkbox (change)="todoItemSelectionToggle(node)"
                                  [checked]="descendantsAllSelected(node)"
                                  [indeterminate]="descendantsPartiallySelected(node)">{{node.name}}<h6
                        style="display: inline">{{node.id}}</h6></mat-checkbox>
                </mat-tree-node>
            </mat-tree>

            <button (click)="selectValues()" mat-button>selectValues</button>
        </form>

    </div>

    <div class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center" mat-dialog-actions>

        <button (click)="matDialogRef.close(['delete',roleForm])"
                *ngIf="action === 'edit'"
                aria-label="Delete"
                class="mr-8"
                mat-button
                matTooltip="Delete">
            DELETE
        </button>

        <button (click)="matDialogRef.close(roleForm)"
                *ngIf="action !== 'edit'"
                [disabled]="roleForm.invalid"
                aria-label="SAVE"
                class="save-button"
                mat-button>
            ADD
        </button>

        <button (click)="matDialogRef.close(['save',roleForm])"
                *ngIf="action === 'edit'"
                [disabled]="roleForm.invalid"
                aria-label="SAVE"
                class="save-button"
                mat-button>
            SAVE
        </button>

    </div>
</div>
